<template>

	<body>
		<div class="loan_nav">
			<ul>
				<li>
					<a href="javascript:history.go(-1)">
						<i class="iconfont">&#xe61e;</i>
					</a>
				</li>
				<li>
					<p>我的优惠券</p>
				</li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">

		</div>
		<!-- <div v-for="item in items">
			<div class="coupon-item" style="width: 96%;margin-left: 2%;">
				<div class="style-six">
					<div class="info-box">
						<p class="nick">【优惠】{{item.title}}</p>
						<div class="coupon-money">
							<div class="lay of">
								<em>新人专享</em>
							</div>
							<div class="lay">
								<p class="tit price">奖品由</p>
								<p class="tit price">{{company}}</p>
								<p class="tit price">提供</p>
							</div>
						</div>
					</div>
					<a href="javascript:;" class="get-btn">
						<span @click="show2=true">点击<br>领取</span>
						<p>限领1次</p>
					</a>
				</div>
			</div>
		</div> -->
		<toast v-model="show2" type="text">已领取</toast>
	</body>
</template>

<script>
import { Toast } from 'vux'
export default {
	components: {
		Toast,
	},
	data() {
		return {
			show2: false,
			company: 'xxxx',
			items: [{ title: '放款手续费折扣优惠券' }]
		}
	},

}
</script>

<style scoped>
a {
  text-decoration: none;
  color: #a1a1a1;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

p {
  font-size: 0.26rem;
}

a:active {
  color: #8c88ff;
  border: none;
  outline: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
form,
blockquote,
ul,
ol,
li,
dl,
dd,
td,
th {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

em,
i {
  font-style: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

label {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.coupon-wrapper .coupon-item {
  width: 100%;
}

.coupon-item .nick {
  color: #000;
  font-size: 0.26rem;
}

.coupon-item .coupon-money {
  width: 100%;
  font-size: 0.26rem;
  align-items: center;
}

.coupon-item .coupon-money em {
  font-size: 0.26rem;
}

.style-one,
.style-two,
.style-three,
.style-four,
.style-five,
.style-six,
.style-seven {
  width: 100%;
  height: 2rem;
  position: relative;
  margin: 5% 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #e5004f;
}

.style-one .info-box,
.style-two .info-box,
.style-three .info-box,
.style-four .info-box,
.style-five .info-box,
.style-six .info-box,
.style-seven .info-box {
  -webkit-box: 1;
  -webkit-flex: 1;
  flex: 1;
  padding: 0.2rem;
  position: relative;
}

.style-one .info-box:before,
.style-two .info-box:before {
  top: -1.8rem;
  left: -0.5rem;
  -webkit-transform: rotate(43deg);
  transform: rotate(43deg);
}

.style-one .info-box:after,
.style-two .info-box:after {
  bottom: -1.8rem;
  left: -0.5rem;
  -webkit-transform: rotate(-43deg);
  transform: rotate(-43deg);
}

.style-one .get-btn,
.style-two .get-btn,
.style-three .get-btn,
.style-four .get-btn,
.style-six .get-btn,
.style-seven .get-btn {
  width: 24%;
  height: 2rem;
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.35;
  background-color: #e5004f;
  position: relative;
  padding: 0.4rem 0 0 0;
}

.get-btn span {
  display: block;
}

.get-btn p {
  color: gold;
  font-size: 0.22rem;
}

.style-two .info-box:before,
.style-two .info-box:after {
  border-color: transparent;
}

.style-two .get-btn span,
.style-three .get-btn span,
.style-six .get-btn span,
.style-seven .get-btn span {
  font-size: 0.26rem;
  word-break: break-all;
  font-size: 0.4rem;
}

.style-six .get-btn,
.style-seven .get-btn {
  width: 28%;
  background-color: #f76264;
}

.style-three .get-btn span,
.style-six .get-btn span {
  color: #378ae8;
}
/*.style-three .get-btn span:after,.style-six .get-btn span:after {
		content:"V";
		font-size:0.28rem;
		display:block;
	}*/

.style-six {
  background-color: #fff;
  color: #999;
  border: none;
}

.style-six:after,
.style-six:before {
  content: "";
  height: 0.2rem;
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  z-index: 9;
  background-image: linear-gradient(
      -45deg,
      #fbf9fe 25%,
      transparent 25%,
      transparent
    ),
    linear-gradient(-135deg, #fbf9fe 25%, transparent 25%, transparent),
    linear-gradient(-45deg, transparent 75%, #fbf9fe 75%),
    linear-gradient(-135deg, transparent 75%, #fbf9fe 75%);
  background-size: 0.2rem 0.6rem;
  background-repeat: repeat-x, repeat-x;
}

.style-six:after {
  top: -0.12rem;
}

.style-six:before {
  bottom: -0.12rem;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.style-six .get-btn span {
  color: #fff;
}
/* 立即使用 */

.style-one.have {
  border: 1px solid #ddd;
  color: #c1c1c1;
  color: #c1c1c1;
}

.style-one.have .info-box:before,
.style-one.have .info-box:after,
.style-two.have .info-box:before,
.style-two.have .info-box:after {
  border-right: 1px solid #c1c1c1;
}

.style-two.have .get-btn span,
.style-three.have .get-btn span,
.style-six.have .get-btn span,
.style-seven.have .get-btn span {
  width: 1.6rem;
  padding: 0.2rem 0;
  font-size: 0.26rem;
}

.style-three.have .get-btn span,
.style-four.have .get-btn span,
.style-six.have .get-btn span {
  color: #767676;
  font-size: 0.26rem;
}

.style-three.have .get-btn span:after,
.style-six.have .get-btn span:after {
  content: "";
}

.style-four.have {
  border: 1px dashed #c1c1c1;
}

.style-five.have,
.style-five.have .get-btn:after,
.style-six.have,
.style-seven.have {
  background-color: #c1c1c1;
}

.style-five.have .get-btn:after {
  -webkit-box-shadow: -3px 0 8px #8c8c8c;
  box-shadow: -3px 0 8px #8c8c8c;
}

.style-five.have .get-btn span {
  width: 5rem;
  font-size: 1.5rem;
  color: #fff;
}

.style-six.have .nick,
.style-six.have .of,
.style-six.have .tit,
.style-six.have .demand {
  color: #fff;
}

.style-six.have span,
.style-seven.have span {
  font-size: 1.6rem;
  color: rgba(189, 189, 189, 1);
}

.lay {
  padding: 0 0.2rem;
  display: flex;
}
.lay p:nth-child(2) {
  padding: 0 0.1rem;
}

.price {
  font-size: 0.24rem !important;
  margin-top: 0.2rem;
}
</style>